<template>
    <div>
        <h1>添加车主卡</h1>
        <hr>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 用户姓名：</div>
                <el-input placeholder="请输入用户名" v-model="uerList.input" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>车牌号:</div>
                <el-input placeholder="请输入车牌号" v-model="uerList.input1" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div><span class="span1">*</span> 联系电话：</div>
                <el-input placeholder="请输入联系电话" v-model="uerList.input2" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div><span class="span1">*</span>持卡人:</div>
                <el-input placeholder="请输入持卡人" v-model="uerList.input3" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div> 行驶证车主姓名：</div>
                <el-input placeholder="请输入行驶证车主姓名：" v-model="uerList.input4" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>车主身份证号:</div>
                <el-input placeholder="请输入车主身份证号" v-model="uerList.input5" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div>品牌型号：</div>
                <el-input placeholder="请输入车辆品牌型号" v-model="uerList.input6" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>车辆识别代码:</div>
                <el-input placeholder="请输入车辆识别代码" v-model="uerList.input7" clearable class="input1">
                </el-input>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div> 车辆发动机号：</div>
                <el-input placeholder="请输入车辆发动机号：" v-model="uerList.input8" clearable class="input1">
                </el-input>
            </el-col>
            <el-col :span="8">
                <div>商业险到期日:</div>
                <div class="block">
                    <el-date-picker v-model="uerList.value" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="input2">
            <el-col :span="8">
                <div>交强险到期日:</div>
                <div class="block">
                    <el-date-picker v-model="uerList.value1" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="8">
                <div>车辆初登日期:</div>
                <div class="block">
                    <el-date-picker v-model="uerList.value2" type="date" placeholder="选择日期" class="input1">
                    </el-date-picker>
                </div>
            </el-col>
        </el-row>
        <div> 行驶证附件：</div>
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-row class="input2">
            <el-button type="primary" @click="saveBtn()">保存</el-button>
            <el-button>取消</el-button>
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
          
            input: '',
            value: '',
            value1: '',
            imageUrl: '',
            area: [
                { id: 1, name: "锦江区", vule: "锦江区" },
                { id: 2, name: "青羊区", vule: "青羊区" },
                { id: 3, name: "金牛区", vule: "金牛区" },
                { id: 4, name: "武侯区", vule: "武侯区" },
                { id: 5, name: "成华区", vule: "成华区" },
                { id: 6, name: "龙泉驿区", vule: "龙泉驿区" },
                { id: 7, name: "青白江区", vule: "青白江区" },
                { id: 8, name: "新都区", vule: "新都区" },
                { id: 9, name: "温江区", vule: "温江区" },
                { id: 10, name: "双流区", vule: "双流区" },
                { id: 11, name: "郫都区", vule: "郫都区" },
                { id: 12, name: "新津区", vule: "新津区" },
                { id: 13, name: "高新区", vule: "高新区" },
                { id: 14, name: "简阳市", vule: "简阳市" },
                { id: 15, name: "都江堰市", vule: "都江堰市" },
                { id: 16, name: "彭州市", vule: "彭州市" },
                { id: 17, name: "邛崃市", vule: "邛崃市" },
                { id: 18, name: "大邑市", vule: "大邑市" },
                { id: 19, name: "蒲江县", vule: "蒲江县" },
                { id: 20, name: "成都天府新区", vule: "成都天府新区" },
            ],
            uerList: {
                input: '',
                input1: '',
                input2: '',
                input3: '', 
                input4: '',
                input5: '',
                input6: '',
                input7: '',
                input8: '',
                value: '',
                value1: '',
                value2: '',

            }
        }
    },
    methods: {


        // 保存车主信息
        // baocun() {           
        //     console.log(this.uerList);
        //     this.$axios({
        //         url: '/carOwner/add',
        //         method: 'post',
        //         data: {
        //             carBrandId: this.uerList.input3,
        //             carNum: this.uerList.input1,
        //             name: this.uerList.input,
        //             phoneNum:this.uerList.input2,
        //         },
        //     })
        //     .then(res => {
        //         console.log(res);
        //     })
        //     // .cache(res=>{
        //     //     console.log(res);
        //     // })
        // },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        //保存
        saveBtn() {
            // console.log(this.ruleForm);
            console.log('111');
            this.$axios({
                url: "/carOwner/add",
                method: "POST",
                data: this.ruleForm,
            }).then((res) => {
                console.log(res);
                console.log(this.ruleForm.carBrandId);
                this.ruleForm = {}
            });
        },
    }
}
</script>

<style scoped>
/* *{
    padding: 0;
    margin: 0;
} */
.input1 {
    width: 400px;
}

.input3 {
    width: 600px;
    height: 150px;
}

.left1 {
    float: left;
}

.span1 {
    color: red;
}

.input2 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.avatar-uploader .el-upload {
    /* border: 1px dashed #d9d9d9; */
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader {
    border: 1px solid #d9d9d9;
    width: 178px;
}
</style>